<template>
  <div class="goods-price-area-chart">
    <div class="goods-price-area-chart-title">商品价格区间图</div>
    <div class="goods-price-area-chart-div">
      <div ref="chart"></div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      goodsStat: {
        type: Object,
        required: true
      }
    },

    computed: {
      goodsAreaObj() {
        return this.goodsStat.goodsAreaObj;
      },
      intervalPriceList() {
        return this.goodsStat.intervalPriceList;
      }
    },

    data() {
      return {
        chart: null,
        goodsAreaMap: null
      };
    },

    mounted() {
      this.setChart();
      this.erd.listenTo(this.$el, this.chartResetSize);
    },

    methods: {
      setChart() {
        let chartDom = this.$refs['chart'];
        const chart = this.echarts.init(chartDom);
        let option = this.getOption();
        chart.setOption(option, true);
        this.chart = chart;
      },

      getOption() {
        let goodsStat = this.goodsStat;
        let intervalPriceList = this.intervalPriceList;
        let intervalList = _.map(intervalPriceList, 'text');

        let res = this.getChartSeries();
        let option = {
          grid: {
            left: 50,
            top: 30,
            right: 30,
            bottom: 30
          },
          legend:{
            selectedMode: false
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              interval: 0
            },
            data: intervalList
          },
          yAxis: {
            min: 0,
            max: res.maxCount
          },
          series: res.series
        };

        if (intervalPriceList.length > 7) {
          option.dataZoom = [{
            type: 'inside',
            xAxisIndex: 0,
            zoomLock: true,
            orient: 'horizontal',
            startValue: intervalList[0],
            endValue: intervalList[6]
          }];
        }
        return option;
      },

      getChartSeries() {
        let goodsAreaObj = this.goodsAreaObj;
        let fields = ['costPrice', 'salePrice', 'channelPrice'];
        let series = [];
        let maxCount = 0;
        for (let i = 0; i < fields.length; i++) {
          const field = fields[i];
          let dataList = goodsAreaObj[field];
          let areaCountList = this.getDataAreaStatCount(dataList, field);
          let serieName = this.i18n.getMsg(`statistic.statChart.goodsModelPriceType.${field}`);
          let serie = {
            type: 'bar',
            name: serieName,
            data: areaCountList
          };
          series.push(serie);

          let maxData = _.max(areaCountList);
          if (maxCount < maxData) {
            maxCount = maxData;
          }
        }
        maxCount = _.ceil(maxCount, -1);
        return {
          maxCount,
          series
        };
      },

      getDataAreaStatCount(priceList, type) {
        let intervalPriceList = this.intervalPriceList;
        let areaCountList = [];
        for (let i = 0; i < intervalPriceList.length; i++) {
          areaCountList.push(0);
        }

        let goodsStat = this.goodsStat;
        let minPrice = goodsStat.areaMinPrice;
        let intervalPrice = goodsStat.areaIntervalPrice;
        let goodsAreaMap = this.goodsAreaMap;
        if (goodsAreaMap === null) {
          goodsAreaMap = {};
          this.goodsAreaMap = goodsAreaMap;
        }
        let goodsAreaObj = goodsAreaMap[type];
        if (goodsAreaObj === undefined) {
          goodsAreaObj = {};
          goodsAreaMap[type] = goodsAreaObj;
        }
        for (let i = 0; i < priceList.length; i++) {
          let price = priceList[i];
          let index = (price - minPrice) / intervalPrice;
          index = Math.floor(_.round(index, 4));
          areaCountList[index] += 1;

          let intervalPriceObj = intervalPriceList[index];
          let arr = goodsAreaObj[intervalPriceObj.text];
          if (arr === undefined) {
            arr = [];
            goodsAreaObj[intervalPriceObj.text] = arr;
          }
          arr.push(price);
        }
        return areaCountList;
      },

      chartResetSize() {
        let chart = this.chart;
        if (chart !== null) {
          chart.resize();
        }
      }
    }
  };

</script>

<style lang="scss" scoped>
  .goods-price-area-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .goods-price-area-chart-title {
      font-size: 20px;
      text-align: center;
    }

    .goods-price-area-chart-div {
      height: calc(100% - 26px);

      >div {
        width: 100%;
        height: 100%;
      }
    }
  }

</style>
